<template>
  <div class="container">
    <van-popup class="popup"  v-model:show="showLeft"  close-on-click-overlay position="left" :style="{ width: '45%', height: '100%' }">
      <ul>
        <li class="list-items"><van-icon class="icon" name="orders-o" />接单大厅<van-icon class="arrow" name="arrow" /></li>
        <li class="list-items" @click="ClickToseta"><van-icon class="icon" name="records-o" />已接订单<van-icon class="arrow" name="arrow" /></li>
        <van-divider />
        <li class="list-items" @click="ClickToMind"><van-icon class="icon" name="user-circle-o" />个人中心<van-icon class="arrow" name="arrow" /></li>
      </ul>
    </van-popup>
    <div class="header">
      <van-icon name="wap-nav" class="dh" @click="togglePopup" color="#fff" size="30" style="position: absolute; left: 10px;"></van-icon>
      <h3 class="title">订单详情</h3>
    </div>
    <van-search v-model="value"
      placeholder="请输入搜索关键词" 
      input-align="center"
      @search="onSearch">
    </van-search>
  </div>
</template>

<style scoped>
</style>
<div class="list">
  <div v-for="(item, index) in exchangeList" :key="index" class="list-item" @click="goToDetail(item)">
    <div class="item-info">
      <div class="info-row">
        <span class="label">时间：</span>
        <span>{{ item.endTime }}</span>
      </div>
      <div class="info-row">
        <span class="label">简介：</span>
        <span>{{ shortContent(item.content) }}</span>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const togglePopup = () => {
  showLeft.value = !showLeft.value
}
const showLeft = ref(false)
const active = ref(0);
const ClickToseta = () => {
  router.push('/set-accept')
}
const ClickToMind = () => {
  router.push('/Mind')
}
// 控制弹出框显示的变量

const exchangeList = ref([
  {
    id: 1,
    endTime: '2025年3月1日',
    content: '开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序',
  },
  {
    id: 1,
    endTime: '2025年3月1日',
    content: '开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序',
  },


  // 更多数据...
])

const shortContent = (content) => {
  return content.length > 20 ? content.substring(0, 20) + '...' : content;
};

const goToDetail = (item) => {
  router.push(`/detailp?id=${item.id}`)
}

</script>
<link rel="stylesheet" href="dh.css"></link>
<style scoped>
@import '../assets/dh.css';
.container {
  background: linear-gradient(180deg, rgba(195, 207, 226, 1) 0%, rgba(245, 247, 250, 1) 100%);
  min-height: 100vh;
}
.header {
  background-color: #4050B5;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex-grow: 1;
  color: #fff;
  text-align: center;
  font-size: 18px;
  margin: 0;
  letter-spacing: 10px;
}

.list {
  margin: 10px 10px;
}

.list-item {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item-info {
  font-size: 14px;
}

.info-row {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  white-space: nowrap; 
}

.info-row span:last-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.label {
  color: #666;
  font-weight: bold;
  margin-right: 10px;
}
</style>
